{{! Before / after (ADR 0043): the after photo over the before one, cut at the handle (--sv-ba-position, view.js moves it as the range moves; 50% without the script). The range is the control: drag, click or arrow keys; the handle only shows where it is. }}
<figure {{@attrs}}><div class="sv-before-after__frame">{{#image.url}}<img class="sv-before-after__img wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} loading="lazy" decoding="async">{{/image.url}}{{^image.url}}{{@placeholder image}}{{/image.url}}{{#afterImage.url}}<div class="sv-before-after__after"><img class="sv-before-after__img wp-image-{{afterImage.id}}" src="{{afterImage.url}}" alt="{{afterImage.alt}}"{{#afterImage.width}} width="{{afterImage.width}}" height="{{afterImage.height}}"{{/afterImage.width}} loading="lazy" decoding="async"></div>{{/afterImage.url}}{{^afterImage.url}}{{@placeholder afterImage}}{{/afterImage.url}}{{#beforeLabel}}<span class="sv-before-after__label sv-before-after__label--before"{{@edit beforeLabel}}>{{beforeLabel}}</span>{{/beforeLabel}}{{#afterLabel}}<span class="sv-before-after__label sv-before-after__label--after"{{@edit afterLabel}}>{{afterLabel}}</span>{{/afterLabel}}<input class="sv-before-after__range" type="range" min="0" max="100" step="1" value="50" aria-label="{{sliderLabel}}"><span class="sv-before-after__handle" aria-hidden="true"></span></div></figure>